<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <!-- #endif -->
  <view style="padding-bottom: 120rpx">
    <view class="card">
      <view class="user flex content-center justify-between">
        <view class="left flex content-center">
          <image
            :src="
              detail.appUserInfoRespVO
                ? detail.appUserInfoRespVO.avatar
                  ? detail.appUserInfoRespVO.avatar
                  : '/static/images/mine/default.png'
                : '/static/images/mine/default.png'
            "
            mode="aspectFill"
          ></image>
          <view class="" style="line-height: 64rpx">
            {{
              detail.appUserInfoRespVO
                ? detail.appUserInfoRespVO.nickname
                : currentLanguageTexts.focuslife
            }}
          </view>
        </view>
        <view class="right">
          <view
            class="iconfont-yshop icon-mobile"
            @click="makePhoneCall(detail.appUserInfoRespVO?.mobile)"
            style="font-size: 45rpx; margin-right: 40rpx"
          ></view>
        </view>
      </view>
    </view>

    <view class="order_details">
      <view
        class="card_one flex justify-between content-center"
        v-if="detail.orderType != 'due'"
      >
        <view class="" v-if="detail.orderType == 'desk'">
          {{ currentLanguageTexts.tableNumber }}：{{ detail.deskNumber }}
        </view>
        <view class="left" v-else>
          {{ currentLanguageTexts.Mealnumber }}：{{ detail.numberId }}
        </view>

        <view class="right">
          <text>{{ detail.statusDto.title }}</text>
        </view>
      </view>
      <view class="card_two flex justify-between content-center">
        <view class="left">{{ currentLanguageTexts.Deliverymethod }}：</view>
        <view class="right" v-if="detail.orderType == 'takein'">{{
          currentLanguageTexts.takein
        }}</view>
        <view class="right" v-if="detail.orderType == 'takeout'">{{
          currentLanguageTexts.takeout
        }}</view>
        <view class="right" v-if="detail.orderType == 'desk'">{{
          currentLanguageTexts.desk
        }}</view>
        <view class="right" v-if="detail.orderType == 'due'">{{
          currentLanguageTexts.due
        }}</view>
      </view>
      <view class="card_three">
        <view
          class="item flex justify-between content-center"
          style="border-bottom: 1rpx solid #ebebeb"
        >
          <view class="left"> {{ currentLanguageTexts.orderTime }}： </view>
          <view class="right">
            {{ formatDateTime(detail.createTime) }}
          </view>
        </view>
        <view class="item flex justify-between content-center">
          <view class="left"> {{ currentLanguageTexts.orderNo }}： </view>
          <view class="right">
            {{ detail.orderId }}
          </view>
        </view>
      </view>

      <view class="card_four" v-if="detail.orderType != 'due'">
        <view class="title">
          {{ currentLanguageTexts.Inventory }}
        </view>
        <view class="" v-if="detail.orderType == 'desk'">
          <view
            style="text-align: center; color: #f56c6c; margin-top: 10rpx"
            v-for="(n, k) in num + 1"
            :key="k"
          >
            <text v-if="n > 1" style=""> 第{{ n - 1 }}次加菜 </text>
            <text v-else style="">
              {{ currentLanguageTexts.Firstordering }}
            </text>

            <view
              class="shop flex content-center"
              v-for="(cart, k) in detail.cartInfo"
              :key="k"
            >
              <block v-if="cart.addProductMark == n - 1">
                <image :src="cart.image" mode="aspectFill"></image>
                <view class="shop_item">
                  <view class="flex justify-between one">
                    <view class="">{{ cart.title }}</view>
                    <view class="">${{ cart.price }}</view>
                  </view>
                  <view class="two">
                    {{ cart.spec }}
                  </view>
                  <view class="three"> ×{{ cart.number }} </view>
                </view>
              </block>
            </view>
          </view>
        </view>
        <view class="" v-else>
          <view
            class="shop flex content-center"
            v-for="(cart, k) in detail.cartInfo"
            :key="k"
          >
            <image :src="cart.image" mode="aspectFill"></image>
            <view class="shop_item">
              <view class="flex justify-between one">
                <view class="">{{ cart.title }}</view>
                <view class="">${{ cart.price }}</view>
              </view>
              <view class="two">
                {{ cart.spec }}
              </view>
              <view class="three"> ×{{ cart.number }} </view>
            </view>
          </view>
        </view>
      </view>
      <view class="card_four" v-else>
        <view class="title">
          {{ currentLanguageTexts.Booktable }}
        </view>
        <view class="">
          <view class="shop flex content-center">
            <image :src="detail.appShopDeskVO.image" mode="aspectFill"></image>
            <view class="shop_item">
              <view class="flex justify-between one">
                <view class="">{{ detail.appShopDeskVO.title }}</view>
                <view class="">$0.00</view>
              </view>
              <view class="two">
                {{ currentLanguageTexts.tableNumber }}:{{
                  detail.appShopDeskVO.number
                }}
              </view>
              <view class="three"> ×1 </view>
            </view>
          </view>
        </view>
      </view>

      <view class="flex justify-between card_five">
        <view class="left">{{ currentLanguageTexts.notes }}：</view>
        <view class="right">{{
          detail.remark || currentLanguageTexts.noData
        }}</view>
      </view>

      <view class="card_three" v-if="detail.orderType != 'due'">
        <view
          class="item1 flex justify-between content-center"
          style="border-bottom: 1rpx solid #ebebeb"
        >
          <view class="flex content-center left">
            <image
              class="quna"
              src="/static/images/merchant/coupon.png"
              mode=""
            ></image
            >{{ currentLanguageTexts.Voucher }}：
          </view>
          <view class="right"> -${{ detail.couponPrice }} </view>
        </view>
        <view class="item1 flex justify-between content-center">
          <view class="one"> {{ currentLanguageTexts.total }}： </view>
          <view class="right">
            <text class="two"
              >{{ currentLanguageTexts.Discountedalready }}${{
                detail.couponPrice
              }}</text
            ><text class="thr">${{ detail.payPrice }}</text>
          </view>
        </view>
      </view>
      <view class="card_three" v-else>
        <view class="item1 flex justify-between content-center">
          <view class="one"> {{ currentLanguageTexts.AppointedBy }}： </view>
          <view class="right" style="color: black">
            {{ detail.realName }}
          </view>
        </view>
        <view class="item1 flex justify-between content-center">
          <view class="one">
            {{ currentLanguageTexts.timeAppointment }}：
          </view>
          <view class="right" style="color: black">
            {{ formatDateTime(detail.dueTime) }}
          </view>
        </view>
        <view class="item1 flex justify-between content-center">
          <view class="one"> {{ currentLanguageTexts.arrivalTime }}： </view>
          <view class="right" style="color: black">
            {{ detail.reachTime }}
          </view>
        </view>
        <view class="item1 flex justify-between content-center">
          <view class="one">
            {{ currentLanguageTexts.ReservedPhoneNumber }}：
          </view>
          <view class="right" style="color: black">
            {{ detail.deskNumber }}
          </view>
        </view>
        <view class="item1 flex justify-between content-center">
          <view class="one">
            {{ currentLanguageTexts.ReservedPhoneNumber }}：
          </view>
          <view class="right" style="color: black">
            {{ detail.userPhone }}
          </view>
        </view>
      </view>
      <view
        class="card_two flex justify-between content-center"
        v-if="detail.orderType != 'due'"
      >
        <view class="left"> {{ currentLanguageTexts.payWay }}: </view>
        <view class="right">
          {{ detail.statusDto.payType }}
        </view>
      </view>
    </view>
    <view class="fixed flex content-center" v-if="detail.dueStatus == 1">
      <view class="btn" @click="cancelDueOrder(detail.id)">
        {{ currentLanguageTexts.cancelDue }}
      </view>
    </view>
    <view class="fixed flex content-center" v-if="detail.statusDto.type == 2">
      <view class="btn" @click="doTake(detail.id)">
        {{ currentLanguageTexts.Backendreceiving }}
      </view>
    </view>
    <view class="fixed flex content-center" v-if="detail.statusDto.type == -1">
      <view class="btn" @click="refund(detail.id)">
        {{ currentLanguageTexts.Agreerefund }}
      </view>
    </view>
    <view
      class="fixed flex justify-between content-center"
      v-if="detail.statusDto.type == 1"
    >
      <view class="btn" @click="doSend(detail.id)">
        {{ currentLanguageTexts.issue }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { orderDetail } from '@/api/merchant';
import { cancelDue } from '@/api/order';
import { onLoad } from '@dcloudio/uni-app';
import { formatDateTime } from '@/utils/util';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
const { currentLanguageTexts } = storeToRefs(useMainStore());
const title = ref(currentLanguageTexts.value.orderDetail);
const detail = ref({ statusDto: {} });
const num = ref(0);

onLoad((e) => {
  goDetail(e.id);
});

const goDetail = async (id) => {
  let res = await orderDetail({ id: id });
  if (res) {
    detail.value = res;
    num.value = res.cartInfo[res.cartInfo.length - 1].addProductMark;
  }
};

const makePhoneCall = (mobile) => {
  uni.makePhoneCall({
    phoneNumber: mobile,
    fail(res) {},
  });
};

const cancelDueOrder = async (id) => {
  let data = await cancelDue({ id: id });
  if (data) {
    goDetail(id);
  }
};

//出单
const doSend = async (id) => {
  let res = await orderSend({ id: id });
  if (res) {
    goDetail(id);
  }
};

//收货
const doTake = async (id) => {
  let res = await orderTake({ id: id });
  if (res) {
    goDetail(id);
  }
};

//退款
const refund = (id) => {
  uni.showModal({
    title: currentLanguageTexts.value.tip,
    content: currentLanguageTexts.value.Confirmtorefund,
    confirmText: currentLanguageTexts.value.confirm,
    cancelText: currentLanguageTexts.value.cancel,
    success: async function (res) {
      if (res.confirm) {
        let res1 = await orderRefund({ id: id });
        if (res1) {
          goDetail(id);
        }
      } else if (res.cancel) {
      }
    },
  });
};
</script>

<style lang="scss">
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;

  .btn {
    width: 750rpx;
    height: 120rpx;
    background: #09b4f1;
    text-align: center;
    line-height: 120rpx;
    color: #fff;
    font-size: 28rpx;
  }
}

.card {
  width: 100vw;
  background-color: #fff;
  padding: 25rpx 34rpx;
  box-sizing: border-box;

  .black {
    font-size: 32rpx;
    color: #333333;
  }

  .orange {
    width: 520rpx;
    font-size: 30rpx;
    color: #ff9c2e;
  }

  .user {
    .left {
      image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      font-size: 32rpx;
      color: #333333;
    }

    .right {
      image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
      }
    }
  }
}

.order_details {
  padding: 25rpx 25rpx 200rpx;

  .card_one {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 20rpx 30rpx;

    .left {
      font-size: 40rpx;
      color: #333333;
    }

    .right {
      font-size: 34rpx;
      color: #ff9c2e;
      line-height: 50rpx;
    }
  }

  .card_two {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 20rpx 30rpx;
    margin: 20rpx 0;

    .left {
      font-size: 32rpx;
      color: #333333;
    }

    .right {
      font-size: 32rpx;
      color: #333333;
    }
  }

  .card_three {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 14rpx 30rpx;
    margin: 20rpx 0;

    .item1 {
      padding: 20rpx 0;
      box-sizing: border-box;
      text-align: center;

      .quna {
        width: 35rpx;
        height: 35rpx;
        margin-right: 12rpx;
      }

      .left {
        font-size: 24rpx;
        color: #333333;
      }

      .right {
        font-size: 34rpx;
        color: #fb2a57;
      }

      .one {
        font-size: 30rpx;
        color: #333333;
      }

      .two {
        font-size: 24rpx;
        color: #777777;
      }

      .thr {
        font-size: 42rpx;
        color: #333333;
      }
    }

    .item {
      height: 80rpx;
      line-height: 80rpx;

      .left {
        font-size: 30rpx;
        color: #333333;
      }

      .right {
        font-size: 32rpx;
        color: #333333;
      }
    }
  }

  .card_four {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 24rpx 30rpx;
    margin: 20rpx 0;

    .title {
      font-size: 32rpx;
      border-bottom: 1rpx solid #f2f2f2;
      color: #232323;
      padding: 0 0 12rpx;
      box-sizing: border-box;
    }

    .shop {
      margin: 20rpx 0;

      image {
        width: 122rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .shop_item {
        width: 500rpx;

        .one {
          font-size: 28rpx;
          color: #333333;
        }

        .two {
          font-size: 24rpx;
          color: #777777;
          margin: 6rpx 0;
        }

        .three {
          font-size: 24rpx;
          color: #777777;
        }
      }
    }
  }

  .card_five {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 14rpx 30rpx;
    margin: 20rpx 0;
    font-size: 32rpx;
    color: #333333;

    .right {
      width: 530rpx;
    }
  }
}
</style>
